<template>
  <h1>App</h1>
  <input type="text" v-model="text" />
  <Child></Child>
</template>
<script setup lang="ts">

// 在组件 A 中调用 provide 注入依赖，可以在其后代组件中调用 inject 接受依赖
// 接受的依赖可以在后代组件中修改而实现在祖先组件中的同步修改
// 如果限制其在后代组件中修改，可以调用 readonly

// provide 依赖注入
// 第一个参数为标记名，第二个参数为待注入的依赖值
// provide(name: string, val)

// inject 依赖接受
// 第一个参数为对应标记名，第二个参数为默认值
// 接受时可以使用泛型来约束接受值
// 即接受时其值为 T 或 undefined 类型
// 在使用接受值时，未传 defaultVal 参数时，使用 ! 非空断言
// inject<T>(name, defaultVal)

import { provide, ref } from 'vue'
import Child from './components/Child.vue'
const text = ref<string>('')
provide('text', text)
</script>
<style scoped></style>
